import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { DNavBar, DModal, DCurtain } from '@/components'
import DHeader from './component/header'
import DContent from './component/content'
import DList from './component/list'
import DFooter from './component/footer'
import classNames from 'classnames'
import http from '@/api'
import sdk from '@/common/sdk'
import dayjs from 'dayjs'
import './itemdetail.scss'

class Dadvancedetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      bgImages: require('../assets/bgImages.png'),
      title: "代购订单",
      headerobj: {
        itemtime: {
          isShowDay: false,
          isShowHour: true,
          day: 0,
          hours: 0,
          minutes: 0,
          seconds: 0
        }
      },
      status: '',
      id: '',
      isShow: false,
      isCurtain: false,
      item: {},
      curItem: [],//物流信息
      adStart: '',//始发城市
      adEnd: '',//目的城市
      firstList: {
        title: "基本信息",
        info: [
          // {
          //   label: "上游公司",
          //   value: ""
          // },
          // {
          //   label: "上游公司联系方式",
          //   value: ""
          // },
          {
            label: "车主姓名",
            value: ""
          },
          {
            label: "申请人公司",
            value: ""
          },
          {
            label: "尾款进账公司名",
            value: ""
          },
          {
            label: "用款天数",
            value: ""
          },
          {
            label: "用款日期",
            value: ""
          },
          {
            label: "选择车型",
            value: ""
          },
          {
            label: "代购金额",
            value: ""
          },
          {
            label: "合同金额",
            value: ""
          },
          {
            label: "首付款金额",
            value: ""
          },

        ]
      },
      secondList: {
        title: "车辆信息",
        info: [
          {
            label: "外观颜色",
            value: ""
          },
          {
            label: "内饰颜色",
            value: ""
          },
          {
            label: "车架号",
            value: ""
          },
          {
            label: "物流始发地",
            value: ""
          },
          {
            label: "物流目的地",
            value: ""
          }
        ]
      },
      threeList: {
        title: "监管信息",
        info: [
          {
            label: "监管方式",
            value: ""
          },
          // {
          //   label: "监管地址",
          //   value: ""
          // }
        ]
      },
      dlist1: {
        list: [
          {
            title: '申请资料'
          }
        ]
      },
      dlist2: {
        list: [
          {
            title: '验车照片'
          }
        ]
      },
      dlist3: {
        list: [
          {
            title: '物流信息'
          }
        ]
      },
      dlist4: {
        list: [
          {
            title: '合同凭证'
          }
        ]
      }
    }
  }

  componentWillMount() {
    let { id, status } = this.$router.params
    this.getAdvanceDetail(id)
    this.setState({
      headerobj: {
        title: this.getStatus(status)
      },
      id,
      status
    })
  }

  componentDidShow() {
    sdk.setTitleInfo(this.state.title)
  }

  getAdvanceDetail(id) {
    let { firstList, secondList, threeList, fourList, fiveList, sixList } = this.state
    http.getAdvanceDetail(id).then(res => {
      if (!res) {
        return
      }
      if (res.status !== this.$router.params.status) {
        Taro.showToast({
          title: '订单状态已更新',
          icon: 'none'
        }).then(date => {
          Taro.redirectTo({
            url: `/pages/itemdetail/advancedetail?id=${res.id}&status=${res.status}`
          })
        })
      }
      // 'amSale', 'amSaleContact',
      let _firstList = ['vehicleOwnerName', 'entName', 'amTailMoneyComp', 'amSpendPeriod', 'amSpendDate', 'amCarType', 'amMoney', 'amContractMoney', 'downPayment']
      firstList.info.map((item, i) => {
        if (i === 3) {
          return item.value = res[_firstList[i]] + '天'
        }
        item.value = res[_firstList[i]] + (i > 5 ? '万元' : '')
      })

      let _secondList = ['amCarOutColor', 'amCarInColor', 'amCarNo', 'amLogisStart', "amLogisEnd"]
      secondList.info.map((item, i) => {
        item.value = res[_secondList[i]] || '--'
      })

      // amMonitorAddr
      let _threeList = ['amMonitorType']
      threeList.info.map((item, i) => {
        item.value = res[_threeList[i]] || '--'
      })
      //根据订单状态计算倒计时
      let times = ''
      let status = this.$router.params.status
      if (status === '5') {
        let createTime = dayjs(res.updateTime).add(3, 'day')
        times = createTime.diff(dayjs(), 'day', 'true')
      } else {
        times = 0
      }
      this.setState({
        firstList,
        secondList,
        threeList,
        headerobj: {
          ...this.state.headerobj,
          account: res.orderNo,
          text: this.getText(status, res),
          tiptext: this.getPlatformTxt(status),
          itemtime: {
            isShowDay: false,
            isShowHour: true,
            day: times,
            hours: 0,
            minutes: 0,
            seconds: 0
          }
        },
        item: res
      })
    })
  }
  getStatus(status) {
    return {
      // $0: '待审核',
      // $1: '待资方上传',
      // $2: '待确认',
      // $3: '运输中',
      // $4: '待资方上传',
      // $5: '待确认',
      // $6: '交易成功',
      // $7: '审核未通过',
      $8: '已撤回',
      // $9: '交易异常 ',
      $0: '待审核',
      $11: '待审核',
      $7: '审核不通过',
      $12: '审核不通过',
      $1: '审核通过',
      $6: '审核通过',
      $13: '审核通过',
    }[`$${status}`]
  }
  getPlatformTxt(orstatu) {
    return {
      $5: '系统将自动确认',
    }[`$${orstatu}`]
  }
  getText(orstatu, details) {
    return {
      // $0: '资金方正在审核，请耐心等待',
      // $1: '资金方将上传验车照片，请耐心等候',
      // $2: '请查看验车照片查验车辆',
      // $3: '车辆正在路上，您可查看物流信息',
      // $4: '交易完成后，资金方将上传资料，请耐心等候',
      // $5: '请确认资金方所上传的资料',
      // $6: '亲，恭喜你成功完成一笔订单！',
      // $7: '很遗憾，您的代购申请未通过审核，您可再次提交申请',
      // $8: '该代购申请已被撤回',
      // $9: '您的订单交易异常，平台客服已介入并终止 ',
      $7: details.explain1 || '',
      $12: details.explain2 || '',

    }[`$${orstatu}`]
  }
  handleDataPhoto() {
    Taro.navigateTo({
      url: `/pages/applicationinfo/applicationinfo?id=${this.state.id}&active=0`
    })
  }
  handleCarPhoto() {
    Taro.navigateTo({
      url: `/pages/applicationinfo/applicationinfo?id=${this.state.id}&active=1`
    })
  }
  handleContact() {
    Taro.navigateTo({
      url: `/pages/applicationinfo/applicationinfo?id=${this.state.id}&active=2`
    })
  }
  //撤回
  onDraworder() {
    this.setState({
      isShow: true
    })
  }
  getBackAdvance(id) {
    http.getBackAdvance({ id: id }).then(res => {
      Taro.redirectTo({
        url: `/pages/itemdetail/advancedetail?id=${id}&status=8`
      })
    })
  }
  //确认验车
  onConfirmCar() {
    Taro.redirectTo({
      url: `/pages/applicationinfo/applicationinfo?id=${this.state.id}&active=1&status=1`
    })
  }
  //确认合同
  onConfirmProof() {
    Taro.redirectTo({
      url: `/pages/applicationinfo/applicationinfo?id=${this.state.id}&active=2&status=1`
    })
  }
  //查看物流
  handleLooklogis() {
    this.setState({
      isCurtain: true
    })
    this.getLogisticList(this.state.id)
  }
  getLogisticList(id) {
    http.getLogisticList({ id: id }).then(res => {
      if (!res) {
        return
      }
      let start = [], traning = [], end = []
      res.map(item => {
        if (item.status === '1') {
          start.push({
            title: `物流已提车`,
            color: '',
            date: item.createTime.split(' ')[0],
            time: item.createTime.split(' ')[1]
          })
          let endcity = '', startcity = ''
          if (item.endCity === '市辖区') {
            endcity = item.endProv
          } else {
            endcity = item.endCity
          }
          if (item.startCity === '市辖区') {
            startcity = item.startProv
          } else {
            startcity = item.startCity
          }
          this.setState({
            adStart: startcity,
            adEnd: endcity
          })
        }
        if (item.status === '2') {
          traning.push({
            title: `车辆到达${item.loAddrProv}${item.loAddrCity}`,
            color: '',
            date: item.createTime.split(' ')[0],
            time: item.createTime.split(' ')[1]
          })
        }
        if (item.status === '3') {
          traning.push({
            title: `车辆已到达目的地，${item.endAddress}`,
            color: '',
            date: item.createTime.split(' ')[0],
            time: item.createTime.split(' ')[1]
          })
        }
      })
      let curItem = [...end, ...traning, ...start]
      curItem[0].color = 'yellow'
      this.setState({
        curItem
      })
    })
  }
  handleChange() {
    this.setState({
      isCurtain: false
    })
  }
  onClose() {
    this.setState({
      isShow: false
    })
  }
  onLastHandle() {
    let { id } = this.state
    this.onClose()
    this.getBackAdvance(id)
  }
  onClickLeftIcon() {
    Taro.redirectTo({
      url: '/pages/advanceorderList'
    })
  }
  handleSubmitAsign() {
    let { id } = this.state
    Taro.redirectTo({
      url: `/pages/advanceform/advanceform?id=${id}`
    })
  }

  render() {
    const {
      bgImages,
      title,
      isShow,
      firstList,
      secondList,
      threeList,
      dlist1,
      dlist2,
      dlist3,
      dlist4,
      status,
      isCurtain,
      curItem,
      adStart,
      adEnd,
      headerobj
    } = this.state

    return (
      <View className='b_itemdetail'>
        <Image src={bgImages} className={classNames('b_itemdetail__imagebs', process.env.NODE_ENV === 'development' ? '' : 'b_itemdetail__NODEimg')}></Image>
        <DNavBar title={title} status={true} onClickLeftIcon={this.onClickLeftIcon} className='b_itemdetail__nav'></DNavBar>
        <View className='b_itemdetail__box'>
          <View className='b_itemdetail__content'>
            <DHeader {...headerobj}></DHeader>
            <DContent {...firstList}></DContent>
            <DContent {...secondList}></DContent>
            <DContent {...threeList}></DContent>
            {status < 8 &&
              <DList {...dlist1} handleClick={this.handleDataPhoto.bind(this)}></DList>
            }
            {(status > 2 && status < 7) &&
              <DList {...dlist2} handleClick={this.handleCarPhoto.bind(this)}></DList>
            }
            {/* {status > 3 && status < 7 &&
              <DList {...dlist3} handleClick={this.handleLooklogis.bind(this)}></DList>
            }
            {status === '6' &&
              <DList {...dlist4} handleClick={this.handleContact.bind(this)}></DList>
            } */}
            {/* {status === '0' &&
              <DFooter firstText='撤回审核' onFirstClick={this.onDraworder.bind(this)}></DFooter>
            } */}
            {/* {status === '2' &&
              <DFooter secondText='确认验车' onSeconClick={this.onConfirmCar.bind(this)}></DFooter>
            }
            {status === '3' &&
              <DFooter secondText='查看物流' onSeconClick={this.handleLooklogis.bind(this)}></DFooter>
            }
            {status === '5' &&
              <DFooter secondText='确认合同' onSeconClick={this.onConfirmProof.bind(this)}></DFooter>
            } */}
            <View className="footer_btns">
              {(status === '7' || status === '12' || status === '8') &&
                <DFooter secondText='重新提交' onSeconClick={this.handleSubmitAsign.bind(this)}></DFooter>
              }
              {(status === '0' || status === '7' || status === '12' || status === '1' || status === '6' || status === '13') &&
                <DFooter secondText='返回' onSeconClick={() => {
                  Taro.navigateBack()
                }}></DFooter>
              }
              {status === '0' &&
                <DFooter firstText='撤销订单' onFirstClick={this.onDraworder.bind(this)}></DFooter>
              }
            </View>

          </View>
        </View>
        <DCurtain
          isCurtain={isCurtain}
          curItem={curItem}
          adstart={adStart || '--'}
          adend={adEnd || '--'}
          onClose={this.handleChange.bind(this)}
        ></DCurtain>
        <DModal
          isShow={isShow}
          title='提示'
          text='确认撤回订单吗？'
          firstbtn='取消'
          lastbtn='确认'
          onFirst={this.onClose.bind(this)}
          onCancel={this.onClose.bind(this)}
          onLast={this.onLastHandle.bind(this)}
        ></DModal>
      </View>
    )
  }

}


export default Dadvancedetail
